class CharacterModal {
  constructor(onSave, onCancel) {
    this.onSave = onSave;
    this.onCancel = onCancel;
    this.modal = document.createElement('div');
    this.setupModal();
  }

  setupModal() {
    this.modal.classList.add('modal-overlay');

    const modalContent = document.createElement('div');
    modalContent.classList.add('modal-content');

    // 标题
    const title = document.createElement('h2');
    title.textContent = '创建/编辑角色';
    modalContent.appendChild(title);

    // 表单
    const form = document.createElement('form');
    
    // 角色名称
    const nameField = this.createField('角色名称', 'text', 'name');
    form.appendChild(nameField);

    // 角色头像
    const avatarField = this.createField('角色头像', 'file', 'avatar');
    form.appendChild(avatarField);

    // 性格特征
    const personalityField = this.createTextareaField('性格特征', 'personality');
    form.appendChild(personalityField);

    // 说话风格
    const styleField = this.createTextareaField('说话风格', 'style');
    form.appendChild(styleField);

    // 按钮容器
    const buttonContainer = document.createElement('div');
    buttonContainer.classList.add('modal-buttons');

    // 保存按钮
    const saveButton = document.createElement('button');
    saveButton.type = 'submit';
    saveButton.textContent = '保存';
    buttonContainer.appendChild(saveButton);

    // 取消按钮
    const cancelButton = document.createElement('button');
    cancelButton.type = 'button';
    cancelButton.textContent = '取消';
    cancelButton.addEventListener('click', this.onCancel);
    buttonContainer.appendChild(cancelButton);

    form.appendChild(buttonContainer);

    // 表单提交事件
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(form);
      const avatarFile = formData.get('avatar');
      
      // 将文件转换为base64
      let avatarBase64 = '';
      if (avatarFile && avatarFile.size > 0) {
        avatarBase64 = await new Promise((resolve) => {
          const reader = new FileReader();
          reader.onload = () => resolve(reader.result);
          reader.readAsDataURL(avatarFile);
        });
      }

      // 创建角色数据
      const characterData = {
        name: formData.get('name'),
        personality: formData.get('personality'),
        style: formData.get('style'),
        avatar: avatarBase64 || 'default-avatar.png' // 确保avatar不为空
      };

      // 使用apiService保存角色数据
      const apiService = await import('../../utils/api.js');
      await apiService.default.saveCharacterSettings(characterData.name, characterData);

      this.onSave(characterData);
    });

    modalContent.appendChild(form);
    this.modal.appendChild(modalContent);
  }

  createField(labelText, type, name) {
    const container = document.createElement('div');
    container.classList.add('form-field');

    const label = document.createElement('label');
    label.textContent = labelText;
    container.appendChild(label);

    const input = document.createElement('input');
    input.type = type;
    input.name = name;
    container.appendChild(input);

    // 如果是文件输入，添加预览功能
    if (type === 'file') {
      const preview = document.createElement('img');
      preview.classList.add('avatar-preview');
      preview.style.display = 'none';
      container.appendChild(preview);

      input.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (event) => {
            preview.src = event.target.result;
            preview.style.display = 'block';
          };
          reader.readAsDataURL(file);
        }
      });
    }

    return container;
  }

  createTextareaField(labelText, name) {
    const container = document.createElement('div');
    container.classList.add('form-field');

    const label = document.createElement('label');
    label.textContent = labelText;
    container.appendChild(label);

    const textarea = document.createElement('textarea');
    textarea.name = name;
    container.appendChild(textarea);

    return container;
  }

  show() {
    document.body.appendChild(this.modal);
  }

  hide() {
    if (this.modal.parentNode) {
      this.modal.parentNode.removeChild(this.modal);
    }
  }
}

export default CharacterModal;
